<template>
  <div>
    <el-card class="box-1">
      <div slot="header"><span>{{ title }}</span></div>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" autofocus/>
        </el-form-item>
        <el-form-item label="角色概述" prop="description">
          <el-input v-model="form.description" type="textarea" rows="4"/>
        </el-form-item>
        <el-form-item label="权限列表" class="title"/>
        <el-form-item v-for="(item, index) in form.permissions" :key="item.id" :label="item.label">
          <el-checkbox v-model="item.checkAll" @change="checked=>handleCheckedAllChange(checked, index)">全选</el-checkbox>
          <div>
            <el-checkbox
              v-for="subitems in item.child"
              :key="subitems.id"
              :label="subitems.label"
              v-model="subitems.has_power"
              @change="checked=>handleCheckedItemChange(checked, index)"/>
          </div>
        </el-form-item>
        <div class="text-center">
          <el-button type="primary" @click="onSubmit('form')">提 交</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',

      form: {
        id: '',
        name: '',
        description: '',
        permissions: []
      },
      rules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'change' }],
        description: [{ required: true, message: '请输入角色概述', trigger: 'change' }]
      }
    }
  },

  watch: {},
  created() {
    const query = this.$route.query
    this.title = query.title
    query.id && (this.form = { id: query.id, name: query.name, description: query.description, permissions: [] })
    this.getData()
  },
  methods: {
    /**
     * 获取权限列表
     * 对应接口权限列表('role/auth-list'),
     * token  用户凭证  (必填)
     * id: 角色id
     * */
    getData() {
      const url = 'role/auth-list'
      const data = { id: this.form.id }
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.form.permissions = res.data
        for (const i in this.form.permissions) {
          this.form.permissions[i].checkAll = true
          this.form.permissions[i].checks = []
          for (const ii in this.form.permissions[i].child) {
            if (this.form.permissions[i].child[ii].has_power !== 1) {
              this.form.permissions[i].child[ii].has_power = false
              this.form.permissions[i].checkAll = false
            } else {
              this.form.permissions[i].child[ii].has_power = true
              this.form.permissions[i].checks.push(this.form.permissions[i].child[ii].label)
            }
          }
        }
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    /**
     * 全选权限类里的权限
     * checked: 是否全选
     * index: 权限类的index
     * */
    handleCheckedAllChange(checked, index) {
      const item = this.form.permissions[index]
      item.checks = []
      for (const i in item.child) {
        item.child[i].has_power = checked
        checked && item.checks.push(item.child[i].label)
      }
      this.form.permissions.splice(index, 1, item)
      this.$set(this.form.permissions[index], 'child', item.child)
    },
    /**
     * 单个权限选择
     * checked: 是否选中
     * index: 所属权限类
     */
    handleCheckedItemChange(checked, index) {
      const item = this.form.permissions[index]
      item.checks = []
      for (const i in item.child) {
        item.child[i].has_power && item.checks.push(item.child[i].label)
      }
      if (item.checks.length === item.child.length) {
        item.checkAll = true
      } else {
        item.checkAll = false
      }
      this.form.permissions.splice(index, 1, item)
      this.$set(this.form.permissions[index], 'child', item.child)
    },

    /**
     * 单提交方法,通过判断有没有form_id执行添加或编辑操作
     * formName: form表单中ref的值,即表单名
     */
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => { // 表单验证
        if (valid) {
          const checked_permissions = []
          for (const i in this.form.permissions) {
            for (const ii in this.form.permissions[i].child) {
              if (this.form.permissions[i].child[ii].has_power) {
                checked_permissions.push(this.form.permissions[i].child[ii].id)
              }
            }
          }
          const url = this.form.id ? '/role/edit/' + this.form.id : '/role/create'
          const data = {
            id: this.form.id,
            name: this.form.name,
            description: this.form.description,
            permissions: checked_permissions.join(',')
          }
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
            this.$router.back(-1)
          }).catch(e => {
            this.$message.error('角色操作失败,请刷新或联系管理员!')
          })
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  max-width: 1000px;
  margin: 0 auto;
  > div span {
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px;
  }
  .el-form {
    max-width: 900px;
    .title{
      font-weight: 600;
    }
    .el-button{
      @extend .bg-green;
      width: 30%;
      min-width: 160px;
    }
  }
}
.el-checkbox{
  margin-right: 30px;
}
.el-checkbox+.el-checkbox {
  margin-left: 0;
  margin-right: 30px;
}
</style>
